<template>
  <div class="app-container">
    <nav-bar title="支付结果" back="/pay/cashier" />
    <van-cell-group>
      <van-cell title="交易订单：" :value="orderHeader.id" />
      <van-cell title="交易流水：" :value="orderHeader.tradeNo" />
      <van-cell title="购买物品：" :value="orderHeader.orderName" />
      <van-cell title="支付金额：">
        <template>
          <span class="color-danger">￥{{ orderHeader.grandTotal }}</span>
        </template>
      </van-cell>
      <van-cell title="支付状态：">
        <template>
          <span v-if="orderHeader.orderStatus===0" class="color-warning">待付款</span>
          <span v-if="orderHeader.orderStatus===1" class="color-danger">付款失败</span>
          <span v-if="orderHeader.orderStatus===2" class="color-primary">已付款</span>
          <span v-if="orderHeader.orderStatus===3" class="color-default">已关闭</span>
        </template>
      </van-cell>
      <van-cell title="支付时间：">
        <template>
          {{ orderHeader.payTime | formatDate('yyyy-MM-dd hh:mm:ss') }}
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderHeader: {}
    }
  },
  created() {
    this.fetchOrder()
    console.log(this.$route)
  },
  methods: {
    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      var r = window.location.search.substr(1).match(reg) // 获取url中"?"符后的字符串并正则匹配
      console.log(r)
      var context = ''
      if (r != null) { context = r[2] }
      reg = null
      r = null
      return context == null || context === '' || context === 'undefined' ? '' : context
    },
    fetchOrder() {
      var orderId = this.$route.query['out_trade_no']
      console.log(orderId)
      if (!orderId) {
        this.msgWarning('支付结果通知缺少参数')
        this.$router.push({ path: '/pay/cashier' })

        return
      }
      this.$store.dispatch('businessOrderHeaderGetById', orderId).then((res) => {
        this.orderHeader = res
      }).catch((_) => {})
    }
  }

}
</script>
